<template>
  <div style="background: #f0f2f5; padding: 24px">
    <a-card :bordered="false" class="cardContainer">
      <div class="arrangeTittle">
        <a-button
          type="link"
          style="color: #4b4b4b; font-size: 18px; padding: 0 10px"
          ><a-icon type="left"
        /></a-button>
        <div>排班管理</div>
      </div>
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="考勤班次" style="margin: 16px 0 16px 15px">
          <div class="tagContainer">
            <a-tag color="#f50"> #f50 </a-tag>
            <a-tag color="#2db7f5"> #2db7f5 </a-tag>
            <a-tag color="#87d068"> #87d068 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-tag color="#108ee9"> #108ee9 </a-tag>
            <a-icon
              style="color: rgb(46, 169, 223); font-size: 24px; cursor: pointer"
              type="plus-circle"
            />
          </div>
        </a-form-model-item>
        <a-form-model-item label="排班周期" style="margin: 16px 0 16px 15px">
          <a-table
            size="middle"
            :columns="tableColumns"
            :data-source="tableData"
            :customHeaderRow="handleClickCustomHeaderRow"
            :scroll="{ x: 800 }"
            bordered
          >
            <!-- <a slot="userName" slot-scope="text, record, index">{{
              (text, index)
            }}</a> -->
            <div slot="userName">
              <a-popover trigger="click" placement="bottom">
                <template slot="content">
                  <div
                    :key="index1"
                    v-for="(item, index1) in 5"
                    style="margin: 5px 0; width: 100%"
                  >
                    <a-button
                      style="width: 100%"
                      type="primary"
                      @click="handleClick(index + 1, index1 + 1)"
                    >
                      Primary
                    </a-button>
                  </div>
                </template>
                <template slot="title">
                  <span>333333</span>
                </template>
                <div style="padding: 5px 0; cursor: pointer">
                  {{ 444 }}
                </div>
              </a-popover>
            </div>
            <template
              :slot="handleTitle(index)"
              v-for="(item, index) in scheduleShifts[0].userScheduleShift"
            >
              <a-popover trigger="click" placement="bottom">
                <template slot="content">
                  <div
                    :key="index1"
                    v-for="(item, index1) in 5"
                    style="margin: 5px 0; width: 100%"
                  >
                    <a-button
                      style="width: 100%"
                      type="primary"
                      @click="handleClick(index + 1, index1 + 1)"
                    >
                      Primary
                    </a-button>
                  </div>
                </template>
                <template slot="title">
                  <span>修改所有成员当天班次</span>
                </template>
                <div style="padding: 5px 0; cursor: pointer">
                  <p>{{ `${index + 1}` }}</p>
                  {{ `${calucateDays("7/" + (index + 1) + "/2021")}` }}
                </div>
              </a-popover>
            </template>
          </a-table>
        </a-form-model-item>
      </a-form-model>
      <a-modal
        title="设置排班周期"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk('ruleForm')"
        @cancel="handleCancel('ruleForm')"
      >
        <a-form-model
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          v-bind="layout"
          :hideRequiredMark="true"
        >
          <a-form-model-item label="周期名称" prop="pass">
            <a-input v-model="ruleForm.pass" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item label="每个周期天数" prop="checkPass">
            <a-input-number v-model="ruleForm.checkPass" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item label="第一天" prop="age">
            <a-select style="width: 100%" v-model="ruleForm.age">
              <a-select-option value="jack"> Jack </a-select-option>
              <a-select-option value="lucy"> Lucy </a-select-option>
              <a-select-option value="Yiminghe"> yiminghe </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '周期名称',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: '周期班次',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: '周期天数',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  { title: '操作', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  }
]
export default {
  name: 'arrange',
  data () {
    return {
      scheduleShifts: [
        {
          userName: "yanghua",
          userId: "Q000006",
          userScheduleShift: [
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 1,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 2,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 3,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 4,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 5,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 6,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "1406809424139526146",
              shiftName: "默认班次",
              punchTimeDesc: "默认班次:09:00 - 18:00;",
              dayNo: 7,
              punchTimeSetting: [
                {
                  "onTime": "09:00",
                  "offTime": "18:00"
                }
              ],
              "isFlexible": 0,
              "flexibleLateMinutes": 0,
              "flexibleEarlyMinutes": 0,
              status: 0
            },
            {
              shiftId: "1412035789696712705",
              shiftName: "二次上下班",
              punchTimeDesc: "二次上下班:09:00 - 11:30;13:30 - 18:00;",
              dayNo: 8,
              punchTimeSetting: [
                {
                  "onTime": "09:00",
                  "offTime": "11:30"
                },
                {
                  "onTime": "13:30",
                  "offTime": "18:00"
                }
              ],
              "isFlexible": 0,
              "flexibleLateMinutes": 0,
              "flexibleEarlyMinutes": 0,
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 9,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 10,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 11,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 12,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 13,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 14,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 15,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 16,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 17,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 18,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 19,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 20,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 21,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 22,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 23,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 24,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 25,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 26,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 27,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 28,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 29,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 30,
              punchTimeSetting: [],
              status: 0
            },
            {
              shiftId: "-9",
              shiftName: "",
              punchTimeDesc: "",
              dayNo: 31,
              punchTimeSetting: [],
              status: 0
            }
          ]
        }
      ],
      tableData: [],
      tableColumns: [
        {
          title: '姓名',
          dataIndex: 'userName',
          key: 'userName',
          width: 80,
          scopedSlots: { customRender: 'userName' },
        }
      ],
      ruleForm: {
        pass: '',
        checkPass: '',
        age: '',
      },

      rules: {
        pass: [{ required: true, trigger: 'change', message: '请输入 ' }],
        checkPass: [{ required: true, trigger: 'change', message: '请输入 ' }],
        age: [{ required: true, trigger: 'change', message: '请输入 ' }],
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      data,
      columns,
      labelCol: {
        span: 2,
        offset: 0,
      },
      wrapperCol: { span: 14 },
      visible: false,
      confirmLoading: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
  mounted () {
    this.scheduleShifts.forEach((item, index) => {
      let rowItem = {
        userName: item.userName,
        userId: item.userId,
        key: item.userId
      }
      item.userScheduleShift.forEach((item1, index1) => {
        rowItem[`${index1 + 1}`] = item1.shiftId === "-9" ? ' ' : item1.shiftName
        this.tableColumns.push(
          {
            // title: `${index1 + 1}` + `${this.calucateDays("7/" + (index1 + 1) + "/2021")}`,
            dataIndex: `${index1 + 1}`,
            scopedSlots: { title: `Title${index1 + 1}` },
            key: `${index1 + 1}`,
            width: 40,
            customCell: (record) => {
              return {
                on: {
                  click: () => { //点击事件，也可以加其他事件
                    console.log(index1 + 1, record)
                  }
                }
              }
            },
          }
        )
      })

      this.tableData.push(rowItem)
    })
  },
  methods: {
    render (index1, record) {
      return {
        on: {
          click: () => { //点击事件，也可以加其他事件
            console.log(11111)
          }
        }
      }
    },

    handleClickCustomHeaderRow (column) {
      return {
        on: {
          click: () => {
            console.log(column, 'column')
          }
        }
      }
    },
    handleClickTableCell (record) {
      return {
        on: {
          click: () => {
            console.log(record, 'record')
          }
        }
      }
    },
    handleClick (index, index1) {
      alert(`点击了${index}号，第${index1}个按钮`)
    },
    handleTitle (index) {
      return `Title${index + 1}`
    },
    calucateDays (currentDate = "7/1/2021") {
      const weekDays = ['日', '一', '二', '三', '四', '五', '六']
      const day = new Date(currentDate).getDay()
      const weekDay = weekDays[day]
      // console.log(weekDay)
      return weekDay
    },
    handleSetRecord (record) {
      // console.log(record)
      this.visible = true
    },
    handleOk (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      setTimeout(() => {
        this.visible = false
      }, 2000)
    },
    handleCancel (formName) {
      console.log('Clicked cancel button')
      this.visible = false
      this.$refs[formName].resetFields()
    },
  }
}
</script>

<style lang="less" scoped>
.tagContainer {
  width: 500px;
  border: 1px solid #e4e4e4;
  height: auto;
  min-height: 37px;
  border-radius: 4px;
  overflow: auto;
  padding: 2px 10px;
}
</style>
<style>
.cardContainer .ant-card-body {
  padding: 12px 0 10px 0;
}
.cardContainer .arrangeTittle {
  font-size: 18px;
  display: flex;
  border-bottom: 1px solid rgb(184, 178, 178);
  padding-bottom: 8px;
}
</style>